<template>
	<view class="navbar">
		<view class="navbar-fixed" :style="{backgroundColor: backgroundColor}">
			<!-- 状态栏小程序撑起高度 -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="navbar-content" :style="{height:navBarHeight+'px', width: windowWidth}">
				<!-- <uni-icons type="left" size="22" @click="quitClick"></uni-icons>
				<view class="navbar-center">
					
				</view> -->
				<slot name="content"></slot>
				<!-- <view class="navbar-search" :style="{backgroundColor: backgroundColor}">
					<view class="navbar-search_icon">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view class="navbar-serach">
						<input class="navbar-search_text" type="text" confirm-type="搜索" v-model="keywords"
							placeholder="请输入您要搜索的内容" @confirm="confirm" />
					</view>
				</view> -->
			</view>
		</view>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
		<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "topTitle",
		props: {
			windowWidth: {
				type: String,
				default: '100%'
			},
			scrollVal: {
				type: Number,
				default: 0
			},
			backgroundColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				// windowWidth: app.globalData.windowWidth,
				navBarHeight: app.globalData.navBarHeight,
			};
		},
		watch: {
			scrollVal: {
				handler(newVal, oldVal) {
						const result = (newVal / 40) > 1 ? 1 : (newVal / 40)
						const result2 = (0.5 + ((newVal - 1) * 0.5) / 40) > 1 ? 1 : (0.5 + ((newVal - 1) * 0.5) / 40)
						topBgOp.value = result
						topMsgBgOp.value = result2
				}
			}
		},
		methods: {
			// quitClick() {
			// 	uni.navigateBack()
			// },
		}
		// watch(() => scrollVal, (newVal, oldVal) => {
		// 	if (props.topType == 5) {
		// 		if (newVal > 100) {
		// 			topBgRed.value = true
		// 		} else {
		// 			topBgRed.value = false
		// 		}
		// 		return
		// 	}
		// 	const result = (newVal / 40) > 1 ? 1 : (newVal / 40)
		// 	const result2 = (0.5 + ((newVal - 1) * 0.5) / 40) > 1 ? 1 : (0.5 + ((newVal - 1) * 0.5) / 40)
		// 	topBgOp.value = result
		// 	topMsgBgOp.value = result2
		// })
	}
</script>

<style lang="scss" scoped>
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			

			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 15px;
				height: 45px;
				box-sizing: border-box;

				// .navbar-search {
				// 	display: flex;
				// 	align-items: center;
				// 	padding: 0 10px;
				// 	width: 100%;
				// 	height: 30px;
				// 	border-radius: 30px;
					
				// 	margin-left: 20rpx;

				// 	.navbar-search_icon {
				// 		// width: 10px;
				// 		// height: 10px;
				// 		margin-right: 10px;
				// 	}

				// 	.navbar-search_text {
				// 		width: 100%;
				// 		font-size: 14px;
				// 		color: #000;
				// 	}
				// }

				// &.search {
				// 	padding-left: 0;

				// 	.navbar-content__search-icons {
				// 		margin-left: 10px;
				// 		margin-right: 10px;
				// 	}

				// 	.navbar-search {
				// 		border-radius: 5px;
				// 	}
				// }
				
				.navbar-center {
					flex: 1;
				}
			}

		}
	}
</style>